<!--
 * @Author: your name
 * @Date: 2022-02-22 22:38:25
 * @LastEditTime: 2022-05-30 10:41:21
 * @LastEditors: 张祥 17839092765@163.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \DTSWeekly_zhyq\src\components\right_box.vue
-->
<!-- right_box -->
<template>
  <transition appear name="custom-classes-transition" enter-active-class="animate__animated animate__faster  animate__fadeInRight " leave-active-class="animate__animated animate__faster animate__fadeOutRight ">
    <div class="right_box">
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </transition>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
</script>

<style lang="scss" scoped>
.right_box {
  position: absolute;
  // width: 350px;
  @include Width(480);

  // height: calc(100% - 60px);
  // @include hHeightCalc(65);
  height: 100%;

  // background: rgba(18, 123, 131, 0.911);
  // top: 30px;
  @include Top(0);
  @include Right(0);

  z-index: 9;
  background: url('../assets/images/基础/right_bg_dark@2x.png') no-repeat center/cover;
  background-size: 100% 100%;
  @include Padding(80, 20, 40, 30);
  box-sizing: border-box;

  .content {
    width: 100%;
    height: 100%;
    // border: 1px solid rgba(255, 255, 255, 0.527);
  }
}
</style>
